<template>
  <div class="mod-user">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        class="search-form"
        ref="searchForm"
        :model="searchForm"
        size="small"
        label-width="80px"
      >
        <div class="input-row">
          <el-form-item prop="name" label="姓名:">
            <el-input
              v-model="searchForm.name"
              type="text"
              clearable
              placeholder="请输入骑手姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号:">
            <el-input
              v-model="searchForm.phone"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              type="number"
              clearable
              maxlength="11"
              :placeholder="$t('publics.mobilePhone')"
            ></el-input>
          </el-form-item>

          <el-form-item prop="idCard" label="身份证号:">
            <el-input
              v-model="searchForm.idCard"
              type="text"
              clearable
              maxlength="17"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>

          <el-form-item prop="auditStatus" :label="$t('publics.status') + ':'">
            <el-select
              v-model="searchForm.auditStatus"
              clearable
              :placeholder="$t('publics.status')"
            >
              <el-option
                v-for="item in auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间:">
            <el-date-picker
              size="small"
              v-model="timer"
              type="datetimerange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              :default-time="['00:00:00', '23:59:59']"
              @change="createTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item style="float: right">
            <div class="default-btn primary-btn" @click="searchChange(true)">
              {{ $t("crud.searchBtn") }}
            </div>
            <div class="default-btn" @click="resetForm('searchForm')">
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con">
        <div v-if="dataList.length === 0" class="empty-text">
          {{ $t("user.noData") }}
        </div>
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            fixed
            type="index"
            label="编号"
            prop="index"
            align="center"
            width="60"
          />
          <el-table-column fixed label="姓名" prop="name" align="center" />
          <el-table-column label="性别" prop="sex" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.sex }}
            </template>
          </el-table-column>

          <el-table-column
            prop="phone"
            width="120"
            align="center"
            label="手机号"
          />
          <el-table-column prop="pic" align="center" label="通行证">
            <template slot-scope="scope">
              <div style="margin:0 auto;" class="table-cell-image">
                <el-image
                  :src="getImgSrc(scope.row.passCardUrl)"
                  class="passage-certificate-pic"
                  fit="cover"
                  :preview-src-list="[getImgSrc(scope.row.passCardUrl)]"
                >
                  <div slot="error" class="image-slot">
                    <img src="@/assets/img/def.png" />
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="commitTime"
            width="160"
            align="center"
            label="申请时间"
          >
          </el-table-column>
          <el-table-column prop="auditStatus" align="center" label="状态">
            <template slot-scope="scope">
              <div
                class="status"
                :style="{
                  color: __MapRiderAuditStatus(scope.row.auditStatus).color,
                }"
              >
                {{ scope.row.auditStatusStr }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="通行证有效期"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.validFrom">
                {{ scope.row.validFrom }} <br />
                至
                <br />
                {{ scope.row.validTo }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            :label="$t('crud.menu')"
            width="230"
          >
            <template slot-scope="scope">
              <div class="text-btn-con" v-if="scope.row.auditStatus == 0">
                <div
                  class="default-btn text-btn"
                  @click.stop="handlePass(scope.row.id, true)"
                >
                  通过
                </div>
                <div
                  class="default-btn text-btn dimission"
                  @click.stop="handlePass(scope.row.id, false)"
                >
                  驳回
                </div>
              </div>
            </template>
          </el-table-column>
          <div slot="empty">&nbsp;</div>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <Approve ref="Approve" @refresh="getDataList" />
  </div>
</template>

<script>
  import Approve from "./Approve";
  import {
    __riderAuditStatus,
    __MapRiderAuditStatus,
  } from "@/utils/statusTypes.js";
  import { getImgSrc } from "@/utils/index";
  export default {
    components: {
      Approve,
    },
    data() {
      return {
        theData: null, // 保存上次点击查询的请求条件
        dataList: [],
        timer: [], // 注册时间范围
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        searchForm: {},
        auditStatus: __riderAuditStatus,
      };
    },
    mounted() {
      this.getDataList(this.page);
    },
    methods: {
      __MapRiderAuditStatus,
      getImgSrc,
      // 离职
      dimission(id) {
        this.$confirm("确认执行 [离职] 操作？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          showCancelButton: true,
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/platform/rider/diss/" + id),
            method: "put",
          }).then(({ code }) => {
            if (code === "00000") {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getDataList(this.page);
            }
          });
        });
      },
      // 审批
      handlePass(id, pass) {
        this.$refs.Approve.open(id, pass);
      },
      /**
       * 获取骑手列表
       */
      getDataList(page, newData = false) {
        if (newData || !this.theData) {
          this.theData = JSON.parse(JSON.stringify(this.searchForm));
        }
        this.$http({
          url: this.$http.adornUrl("/platform/rider/audit-page"),
          method: "post",
          params: {
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize,
          },
          data: this.$http.adornParams(Object.assign(this.theData)),
        }).then(({ data }) => {
          this.dataList = data.records;
          this.page.total = data.total;
        });
      },

      // 条件查询 JSON.stringify(arr)
      searchChange(newData = false) {
        this.page.currentPage = 1;
        this.getDataList(this.page, newData);
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getDataList(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.getDataList(this.page);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.searchForm = {};
        this.$forceUpdate();
        this.timer = [];
      },
      createTimeChange() {
        // 处理 commitStartTime 和 commitEndTime
        if (!this.timer || this.timer.length === 0) {
          delete this.searchForm.commitStartTime;
          delete this.searchForm.commitEndTime;
        } else {
          this.searchForm.commitStartTime = this.timer[0];
          this.searchForm.commitEndTime = this.timer[1];
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .mod-user {
    .tips .text {
      color: #ff0000;
    }
    ::v-deep .el-table__fixed {
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
    ::v-deep .el-table__fixed-right {
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
  }
  .TagS {
    margin-right: 10px !important;
  }

  .table-con {
    position: relative;
  }

  .empty-text {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    color: #909399;
  }
  ::v-deep .export-load {
    top: -50% !important;
  }
  ::v-deep
    .el-select
    .el-select__tags
    > span
    > .el-tag.el-tag--info:nth-last-child(2) {
    max-width: 120px;
  }

  .dot-status {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0 auto;
  }
  .dot {
    margin-right: 4px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
  }
  .dot1 {
    background: #1ad037;
  }
  .dot0 {
    background: #909399;
  }
  .dimission {
    color: red;
  }
</style>
